uni-popup官方文档

我这里的背景是弹出一个选择规格的菜单。使用vue3+ts，使用组合式api

首先看看在vue3+ts+setup下的使用：

从这里可以看出来，弹出层的整体是透明的，而主界面是随着内部的元素大小自适应的。

现在在弹出层中编写复杂的效果

我新建了一个selectSpecs.vue：

这里内容看似很长，其实都是为了展示效果，可以不看细节。可以看看我对滚动区域的高度的设置方法。

引入的方式是将上面“你好”改为如下：

当然组件也是要import的：

当我数据小的时候，他的效果是这样的： 那个四个红角就是背景的颜色。这个效果还可以

当我数据多了之后： 因为宽度自适应，所以宽度是占满了整个屏幕的宽度。你看属性9都换行了。而我希望我的弹出层上下左右都留出一点空间，这样才好看。

我首先想到的是，给这个宽度限制一个最大百分比，用max-width: 80%;，加在background 样式的里面，因为这是整个背景的视图嘛，结果效果是这样的： 红色背景依然是整个屏幕的宽度，但内容跑左边去了，这不是我想要的效果。再看看数据量小的效果： 这看起来是白色框框占红色背景的80%呀，并不是内容占屏幕的80%呀。还不会居中了。

看来是我的样式加的位置不对，但是uni-popup也没提供这个参数。在uni-popup嵌套一层 view来控制样式:

这样也没效果。

于是debug发现，真正控制弹出层主窗体大小的样式是“.uni-popup__wrapper”，难道我要去修改源代码吗？这样不太好，不利于代码移植。

于是就想着有没有办法从子组件修改父组件的样式的方法，结果没找到，倒是找到了父组件修改子组件的样式的方法，于是代码稍微修改一下：

增加了一个样式：

这里注意.vue文件允许有多组，我这里就是新建的一个，然后用深度选择器去修改子组件的样式。

其实父组件与.uni-popup__wrapper中间还隔着一两层view节点，但是:deep也是可以找到这个样式去修改的。

最后效果是这样的： 即使数据多的时候，它也不会把屏幕宽度占满。

其实也是学会了一招修改子组件的样式。